<template>
<div class='category_create'>
  <el-page-header @back="goBack" contrnt="新增文章"></el-page-header>
  <el-form-item label="序号">
    <el-input v-model="form.id" ></el-input>
  </el-form-item>
  <el-form label-width="80px" size="small">
  <el-form-item label="名称">
   <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="描述">
    <el-input type="textarea" :rows="1" v-model="form.description"></el-input>
  </el-form-item>
  <el-form-item label="no">
      <el-input v-model="form.no" ></el-input>
  </el-form-item>
  <el-form-item label="parentId">
    <el-input v-model="form.parentId" ></el-input>
  </el-form-item>  
  <el-form-item style="text-align:right"> 
    <el-button type="primary" @click="submitHandler">提交</el-button>
  </el-form-item>
  </el-form>
</div>
</template>

<script>
import { post } from '@/utils/request';
export default{
//组件名称
name: 'demo',
//组件参数接收来自父组件的数据
props: {},
//组件状态值
data(){
return{
  form:{}
 }
},
//计算属性
computed: {},
//侦听器
watch: {},
//组件方法
methods:{
  submitHandler(){
      // 1. 获取参数  this.form
      // 2. 将参数提交给后台
      let url = "http://localhost:3306/category/saveOrUpdate"
      post(url,this.form).then(resp => {
        // 提示用户录入完成
        this.$message({type:"success",message:resp.message})
        // 返回，展示
        this.goBack();
      })
    },
    goBack(){
      this.$router.back();
    }
},
//以下是生命周期钩子
/**
*组件实例创建完成，属性已绑定，但DOM还未生成，el属性还不存在
*/
created(){
  this.form=this.$route.query;


},
/**
*el被新创建的vm.el替换，并挂载到实例上去之后调用该钩子。
*如果root实例挂载了一个文档内元素，当mounted被调用时vm.el也在文档内。
*/
mounted(){
},
/**
*实例销毁之前调用。在这一步，实例仍然完全可用。
*/
beforeDestroy(){
},
/**
*Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，
*所有的事件监听器会被移除，所有的子实例也会被销毁。
*/
destroyed(){
}
}
</script>

<!--Add"scoped"attributetolimitCSStothiscomponentonly-->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>

</style>
